:root {
  --layout-background-color: #f4f6f8;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}
p {
  margin-bottom: 0;
}
::-webkit-scrollbar {
  width: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}
#app .ant-btn {
  border-radius: 4px;
}
#app .ant-input,
.ant-input-password,
.ant-picker {
  border-radius: 4px !important;
  &:hover {
    border-color: #4770ff !important;
  }
}
#app .ant-picker-focused {
  border-color: #4770ff;
}
#app .ant-picker-range .ant-picker-active-bar {
  background-color: #4770ff;
}
#app .ant-select .ant-select-selector {
  border-radius: 4px;
  &:hover {
    border-color: #4770ff;
  }
}
#app .ant-input-number {
  border-radius: 4px 0 0 4px;
  &:hover {
    border-color: #4770ff;
  }
}

#app .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #4770ff;
  border-color: #4770ff;
}
#app .ant-select-focused .ant-select-selector {
  border-color: #4770ff;
}
#app .ant-form-item-extra {
  margin-top: 8px;
}
.ant-modal-root {
  .ant-modal {
    width: 580px !important;
    .ant-modal-content {
      border-radius: 8px;
      .ant-modal-header {
        border-radius: 8px 8px 0 0;
        border-bottom: none;
      }
      .ant-modal-footer {
        background-color: var(--layout-background-color);
        border-radius: 0 0 8px 8px;
      }
      .ant-modal-body {
        padding: 20px 100px;
        .ant-form {
          .ant-form-item-label {
            font-weight: 500;
          }
          .ant-input,
          .ant-input-password,
          .ant-picker {
            border-radius: 4px;
            &:hover {
              border-color: #4770ff;
            }
          }
          .ant-select .ant-select-selector {
            border-radius: 4px;
            &:hover {
              border-color: #4770ff;
            }
          }
          .ant-input-number {
            border-radius: 4px 0 0 4px;
            &:hover {
              border-color: #4770ff;
            }
          }
          .ant-select-focused .ant-select-selector {
            border-color: #4770ff;
          }
          .ant-picker-focused {
            border-color: #4770ff;
          }
          .ant-picker-range .ant-picker-active-bar {
            background-color: #4770ff;
          }
          .ant-form-item-extra {
            margin-top: 8px;
          }
        }
      }
      .ant-btn {
        border-radius: 8px;
        background: #f2f3f5;
        border: none;
        color: #71747a;
        line-height: 1;
      }
      .ant-btn-primary {
        background: #4770ff;
        color: #ffffff;
      }
    }
  }
  .ant-modal-confirm {
    width: 380px !important;
    .ant-modal-content {
      .ant-modal-body {
        padding: 24px 36px;
      }
    }
  }
}
.ant-message {
  top: 72px;
  .ant-message-notice-content {
    border-radius: 4px;
    padding: 0;
    .ant-message-success {
      background: #f0f9eb;
      border: 1px solid #e1f3d8;
      padding: 12px 140px;
      color: #67c23a;
    }
    .ant-message-error {
      color: #f5222d;
      padding: 12px 140px;
      background: #fbeced;
      border: 1px solid #ebcccd;
    }
    .ant-message-info {
      padding: 12px 140px;
    }
  }
}
